<template>
  <div class="bigBox">
    <!-- 左侧模块 -->
    <div class="user" v-show="isShow">
            <!-- 管理员 -->
            <div class='username'>
                <!-- 头像 -->
                <div class="user_pic" @click="turnToAdmin" @mouseout="changeShow2()" @mouseover="changeShow1()">
                    <img src="@/assets/00.png" alt="" class="img1" v-show="!pic_show">
                    <img src="@/assets/11.png" alt="" class="img2" v-show="pic_show">
                </div> 
                <!-- 个人信息 -->
                <div class="admin">
                    <span>饲养员：{{name}}</span><br>
                    <span>{{centence}}</span>
                </div>
            </div>
            <!-- 标签 -->
            <div class="label">
                <span class="tag">文章分类</span>
                <ul class="sortUl">
                    <li v-for="(s,index) in sortList" :key="index" @click="turnToSearchSort(s)"><i class="iconfont icon-24gl-tags3"></i>{{s}}</li>
                </ul>
            </div>
            <!-- 推荐栏目 -->
            <div class="recommen">
                <span class="rec">推荐</span>
                <!-- 音乐栏目 -->
                <div class="music">
                <span class="sp1">音乐:</span>
                <span class="sp2">戒网</span>
                <span class="sp3">典狱司</span>
                <span class="sp4">不染</span>
                <span class="sp5">无脚鸟</span>
                <span class="sp6">Lemon</span>
                </div>
                <!-- 游戏栏目 -->
                <div class="game">
                    <span class="sp7">游戏:</span>
                    <span class="sp8">CS:GO</span>
                    <span class="sp9">战地1</span>
                    <span class="sp10">巫师3</span>
                    <span class="sp11">怪物'猎'人</span>
                </div>
                <!-- 电影推荐 -->
                <div class="movie">
                  <span class="sp12">电影:</span>
                  <span class="sp13">我和我的祖国</span>
                  <span class="sp14">误杀</span>
                  <span class="sp15">肖申克的救赎</span>
                  <span class="sp16">贝克街的亡灵</span>
                </div>
            </div>
    </div>
    <!-- 文章模块 -->
    <div class="Abox">
        <!-- 文章信息 -->
        <div class="header">
            <!-- 标题 -->
            <span class="title">{{$route.query.blog.title}}</span>
            <span class="dibu">
            <!-- 作者 -->
            <span class="author"><i class="iconfont icon-denglu-copy"></i>小狼</span>
            <!-- 发布时间 -->
            <span class="time"><i class="iconfont icon-shizhong"></i>{{$route.query.blog.time}}</span>
            <!-- 分类 -->
            <span class="sort" @click="turnToSearchSort($route.query.blog.sort)"><i class="iconfont icon-24gl-tags3"></i>{{$route.query.blog.sort}}</span>
            </span>
            <span class="book"><i class="iconfont icon-weixuanzhongyuanquan iconk1"></i></span>
            <span class="book"><i class="iconfont icon-weixuanzhongyuanquan iconk2"></i></span>
            <span class="book"><i class="iconfont icon-weixuanzhongyuanquan iconk3"></i></span>
        </div>
        <!-- 文章主体 -->
        <div class="mainBody">
            <mavon-editor
            v-model="$route.query.blog.context"
            defaultOpen="preview"
            :toolbarsFlag="false"
            :subfield="false"
            codeStyle="atom-one-dark"
            />
        </div>
    </div>
  </div>
</template>

<script >
import {mapState} from 'vuex'
export default {
    name:'articles',
    data(){
        return {
            isShow: true,
            name:'爱学习的小狼',
            centence:'褪去一身洒脱 不过是天涯倦客 饮尽悲欢无人与说',
            pic_show:true,
            context:"```html\n<div>\n\n</div>\n```\n"
        }
    },
    methods:{
        changeShow1(){
            this.pic_show = false
        },
        changeShow2(){
           this.pic_show = true
        },
        turnToAdmin(){
            this.$router.push({
            path:'/admin'
            })
        },
        turnToSearchSort(sort){  
            this.$store.dispatch('searchSort',sort)
            this.$router.push({
            path:'/search'
            })
        }
    },
    computed:{
        ...mapState(['blogList','sortList']),
    }
}
</script>

<style scoped>
.bigBox {
    position: relative;
    background-color: transparent;
    height: 100%;
    font-family: "NLXJ-BODY";
}
.user {
        /* background-color: pink; */
        height: 100%;
        width: 20%;
        position: fixed;
        top: 8%;
        left: 10%;
        z-index: 99;
}
.username {
        position: absolute;
        left: 0;
        top: 0;
        background-color: rgba(255,255,255,0.9);
        height: 31%;
        width: 100%;
}
.label {
        position: absolute;
        left: 0;
        top: 31%;
        background-color:rgba(255,255,255,0.9);
        height: 30%;
        width: 100%;
        border-top: 1px gray solid;
}
.tag {
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translate(-50%);
    height: 10%;
    width: 100%;
    font-size: 15px;
    color:rgb(190, 139, 156) ;
}
.recommen{
  position: absolute;
  top: 61%;
  height: 31%;
  width: 100%;
  background-color: rgba(255,255,255,0.9);
  border-top: 1px gray solid;
  font-size: 15px;
  color:rgb(190, 139, 156)
}
.user_pic {
    position: absolute;
    left: 50%;
    top: 10%;
    transform: translate(-50%);
    background-color: transparent;
    width: 30%;
    height: 40%;
    border: 1px solid gray;
    border-radius: 49%;
    overflow: hidden;
    cursor: pointer;
    z-index: 9;
}
.img1 {
    width:100%;
    height:100%;
}
.img2 {
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    margin-top: -1px;
}
.admin {
    width: 100%;
    height: 30%;
    background-color: transparent;
    font-size: 15px;
    text-align: center;
    position: absolute;
    top: 60%;
    color:rgb(190, 139, 156);
    /* background-color: green; */
}
.admin span {
    display: inline-block;
    padding:5px;
}
.rec {
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translate(-50%);
  }
.music {
    position: relative;
    top: 20%;
    left: 0%;
    width: 100%;
    height: 20%;
}
.sp1 {
    position: absolute;
    top: 20%;
    left: 5%;
}
.sp2 {
    position: absolute;
    top: 20%;
    left: 18%;
}
.sp3 {
    position: absolute;
    top: 20%;
    left: 29%; 
}
.sp4 {
    position: absolute;
    top: 20%;
    left: 45%;
}
.sp5 {
    position: absolute;
    top: 20%;
    left: 56%;
}
.sp6 {
    position: absolute;
    top: 20%;
    left: 72%;
}
.sp2,.sp3,.sp4,.sp5,.sp6 {
    cursor: pointer;
}
.sp2:hover,.sp3:hover,.sp4:hover,.sp5:hover,.sp6:hover {
    color: rgb(26, 179, 239);
}
.game {
    position: absolute;
    top: 40%;
    left: 0%;
    width: 100%;
    height: 20%;
}
.sp7 {
    position: absolute;
    top: 20%;
    left: 5%;
}
.sp8 {
    position: absolute;
    top: 20%;
    left: 18%;
}
.sp9 {
    position: absolute;
    top: 20%;
    left: 32%; 
}
.sp10 {
    position: absolute;
    top: 20%;
    left: 45%;
}
.sp11 {
    position: absolute;
    top: 20%;
    left: 60%;
}
.sp8,.sp9,.sp10,.sp11 {
    cursor: pointer;
}
.sp8:hover,.sp9:hover,.sp10:hover,.sp11:hover {
    color: rgb(26, 179, 239);
}
.movie {
  position: absolute;
    top: 60%;
    left: 0%;
    width: 100%;
    height: 20%;
}
.sp12 {
    position: absolute;
    top: 20%;
    left: 5%;
}
.sp13{
    position: absolute;
    top: 20%;
    left: 17%;
}
.sp14 {
    position: absolute;
    top: 20%;
    left: 46%; 
}
.sp15 {
    position: absolute;
    top: 20%;
    left: 57%;
}
.sp16 {
    position: absolute;
    top: 50%;
    left: 17%;
}
.sp13,.sp14,.sp15,.sp16 {
    cursor: pointer;
}
.sp13:hover,.sp14:hover,.sp15:hover,.sp16:hover {
    color: rgb(26, 179, 239);
}
.Abox {
    background-color: transparent;
    height: 98%;
    width: 50%;
    position: absolute;
    top: 8%;
    left: 30%;
}
.header {
    height: 10%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: white;
    border-bottom: 1px gray solid;
}
.title {
    display: inline-block;
    /* background-color: red; */
    font-size: 30px;
    color: black;
    position: absolute;
    left: 3%;
    top:10%;
    text-align: left;
}
.mainBody{
    position: absolute;
    top: 10%;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    border-radius:0 0 10px 10px;
}
.dibu {
      position: absolute;
      top: 70%;
      left: 3%;
      width: 100%;
      height: 10%;
      text-align: center;
      font-family: "NLXJ-BODY";
      font-size: 16px;
    color: black;
    }
    .author{
      position:absolute;
      top: 0%;
      left: 1%;
      font-family: "NLXJ-BODY";
    }
    .time{
      position:absolute;
      top: 0%;
      left: 12%;
      font-family: "NLXJ-BODY";
    }
    .sort{
      position:absolute;
      top: 0%;
      left: 27%;
      font-family: "NLXJ-BODY";
      cursor: pointer;
    }
  .iconn {
    position: absolute;
    top: 22%;
    left: -4%;
    transform: translate(-50%);
  }
  .sort:hover {
    color:rgb(26, 179, 239)
  }
  .sortUl{
  background-color: transparent;
  position: absolute;
  top: 15%;
  left: 0;
  width: 100%;
  height: 85%;
  font-size: 15px;
  color:rgb(190, 139, 156)
}
.sortUl li{
  position: relative;
  left: 50%; 
  transform: translate(-50%);
  height: 25px;
  width: 100%;
  border-bottom: none;
  cursor: pointer;
}
.sortUl li:hover {
    color:rgb(26, 179, 239);
}
.iconk1{
    position: absolute;
    top: 10%;
    right: 5%;
    height: 15px;
    width:15px;
    border-radius: 50%;
    border: none;
    color: black;
}
.iconk2{
    position: absolute;
    top: 10%;
    right: 8%;
    height: 15px;
    width:15px;
    color: black;
    border-radius: 50%;
    border: none;
}
.iconk3{
    position: absolute;
    top: 10%;
    right: 11%;
    height: 15px;
    width:15px;
    border-radius: 50%;
    border: none;
    color: black;
}
</style>